<template>
  <div class="common-pd-page admission-container">
    <HPModuleTitle :title-text="'入场申请详情'">
      <template>
        <back-button :backPath="'/entrance'"></back-button>
      </template>
    </HPModuleTitle>
    <div class="people-detail-info-box">
      <div class="people-detail-title">入场申请详情</div>
      <el-row class="people-detail-box">
        <!-- 外包人员资料 -->
        <div class="form-static-title">外包人员资料</div>
        <el-col :span="colNum">
          <span class="info-tip">姓名</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.surname }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">拼音</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.english }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">性别</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.sex }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">证件类型</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.certificateTypeCode }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">证件号码</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.certificateCode }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">一寸免冠照</span>
          <span class="sign">：</span>
          <span class="iconfont icon-zhaopian img-icon"></span>
          <span
            class="info-txt cursor img-txt"
            @click="showPDFImgDialog"
            v-bind:data-url="entranceInfo.certificateFile"
            >点击查看</span
          >
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">区号</span>
          <span class="sign">：</span>
          <span class="info-txt">{{
            entranceInfo.areaCode ? `+${entranceInfo.areaCode}` : ""
          }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">联系电话</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.telephone }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">入场时间</span>
          <span class="sign">：</span>
          <span class="info-txt">{{
            entranceInfo.admitTime && entranceInfo.admitTime.split(" ")[0]
          }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">工作地点</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.workingPlaceStr }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">报道地点</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.reportingPlaceStr }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">所在部门</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.deptName }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">外包人员汇报对象</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.higherupName }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">月薪（元）</span>
          <span class="sign">：</span>
          <span class="info-txt">{{
            numberFormat(entranceInfo.monthly, 2)
          }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">考勤工时制</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ workTimeTypeMap[entranceInfo.workTimeType]  }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">外包类型</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ outsourceTypeMap[entranceInfo.outsourceType] }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">岗位名称</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.positionName }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">结算方式</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.settlementMethod }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">现居住地</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.address }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">户籍地址</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.residenceAddress }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">所属供应商</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.supplierName }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">申请开通权限</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.authority }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">确认已开启BHR账号</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.bhrAccount }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">确认已开启OA账号</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.oaAccount }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">确认已添加flow账号</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.flowAccount }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">确认已开启账号匹配</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.accountMatching }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">申请原因</span>
          <span class="sign">：</span>
          <span class="info-txt">{{ entranceInfo.reasonApplying }}</span>
        </el-col>
        <el-col :span="colNum">
          <span class="info-tip">相关附件</span>
          <span class="sign">：</span>
          <span class="info-txt">
            <span
              v-for="file in entranceInfo.fileUrls"
              :key="file.id"
              @click="showFile(file.fileUrl)"
              class="cursor img-txt"
              >{{ file.name }}</span
            >
          </span>
        </el-col>
      </el-row>
      <div v-for="item in formData.flow" :key="item.createDate" class="report">
        <p> <span class="label">驳回人</span> <span>{{ item.operator }}</span>   </p>
        <p> <span class="label">驳回时间</span> <span>{{ item.createDate }}</span>   </p>
        <div class="reson">
          <span class="label">驳回原因</span> <p v-html="item.comment"></p>
        </div>
      </div>
    </div>
    <PreviewPdfOrImage></PreviewPdfOrImage>
  </div>
</template>
<script>
import HPModuleTitle from "@/components/HPModuleTitle";
import PreviewPdfOrImage from "@/components/PreviewPDFOrImage";
import { isFileName } from "@/assets/js/reg";
import {
  findAdmitDetail,
  findAdmitField,
  showFile,
} from "@/fetch/modules/ectrance";
import { numberFormat } from "@/utils/numberFormat";
//import { showOrDownFile } from './../assets/js/preOrDownFile'

export default {
  components: {
    HPModuleTitle,
    PreviewPdfOrImage,
  },
  data() {
    return {
      numberFormat: numberFormat,
      formData: {},
      fileLists: [],
      isShowInputBox: false,
      dialogImageUrl: "",
      fileDialogVisible: false,
      entranceInfo: {
        deptName: "",
        updateDate: "",
        supplierId: "",
        orderId: "",
        needsCvId: "",
        reportingPlaceStr: "",
        photos: [],
        updater: "",
        certificateTypeCode: "",
        outsourcAccount: "",
        surname: "",
        higherupCode: "",
        english: "",
        fileUrl: "",
        id: "",
        state: "",
        bhrAccount: "",
        createDate: "",
        admitTime: "",
        supplierName: "",
        flowAccount: "",
        officeAccount: "",
        certificateCode: "",
        address: "",
        orderNo: "",
        workingPlaceStr: "",
        sex: "",
        reasonApplying: "",
        approvalState: "",
        fileUrls: [],
        telephone: "18800001001",
        higherupName: "芮家俊",
        oaAccount: "0",
        areaCode: "CN",
        accountMatching: "0",
        authority: "",
        offerId: "",
        wechatId: "",
        higherupId: "",
        certificateFile: "",
        wordCode: "",
        deptCode: "",
        residenceAddress: "",
        settlementMethod: "",
      },
      certificates: [],
      stus: "",
      isCan: false,
      roleFlag: 1, // HR 角色 0：员工关系专员  1：薪酬福利专员
      colNum: 12,
      areas: {}, // 区号
      idtypes: {}, // 证件类型
      url: "",
      workTimeTypeMap: {},
      outsourceTypeMap: {}
    };
  },
  computed: {
    codeType: function () {
      return this.fromData.certificatetypeCode;
    },
  },
  created() {
    this.findAdmitField();
  },
  beforeMount() {
    let id = this.$route.params.id;
    this.stus = this.$route.query.stus;
    this.roleFlag = this.$route.query.r;
    if (this.stus && this.stus === "1") {
      // 待填写
      this.isShowInputBox = true;
    } else {
      // 已填写
      this.tipText = "入场相关资料";
      this.isShowInputBox = false;
    }
    this.getEntranceDetal(id);
  },
  methods: {
    // 预览文件
    showFile(fileUrl) {
      let aDom = document.createElement("a");
      aDom.target = "_blank";
      const baseUrl = location.origin.includes("localhost")
        ? "http://10.27.195.151/"
        : `${location.protocol}//${location.hostname}/`;
      aDom.href = baseUrl + fileUrl;
      aDom.style.display = "none";
      document.body.appendChild(aDom);
      setTimeout(() => {
        aDom.click();
      }, 200);
      setTimeout(() => {
        document.body.removeChild(aDom);
      }, 500);
    },
    findAdmitField() {
      const { nid, sn, wc } = this.$route.query || {};
      findAdmitField({ needsCvId: nid, surName: sn, workCode: wc }).then(
        (res) => {
          const data = res.data;
          if (data.state === "0000") {
            this.areas = {};
            this.idtypes = {};
            const { areas, idtypes, clearingFormVO, workTimeTypeMap, outsourceTypeMap } = data.data;
            for (let key in areas) {
              this.areas[key] = areas[key];
            }
            for (let key in idtypes) {
              this.idtypes[key] = idtypes[key];
            }
            if (this.formData) {
              this.entranceInfo = this.desc_datas(this.formData, "");
            }
            this.workTimeTypeMap = workTimeTypeMap
            this.outsourceTypeMap = outsourceTypeMap
            // const { lable: workingPlace } = city || {};
            // const { lable: reportingPlace } = place || {};

            // this.entranceInfo.workingPlace = workingPlace;
            // this.entranceInfo.reportingPlace = reportingPlace;
            this.entranceInfo.settlementMethod = clearingFormVO.settName;
          }
        }
      );
    },
    async getEntranceDetal(needId) {
      const { data } = await findAdmitDetail({ offId: needId });
      if (data.state === "0000" && data.data) {
        this.formData = data.data;
        this.entranceInfo = this.desc_datas(data.data, "");
      }
    },
    // * 预览证件复印件
    showPDFImgDialog() {
      this.showFile(this.entranceInfo.photos[0].fileUrl);
    },
    // * 返回
    cancleAddEntranceInfo() {
      this.$router.push("/entrance");
    },
    beforeAvatarUpload(file) {
      let tempNames = file ? file.name.split(".") : [],
        tempType = file.type.split("/"),
        isImage = tempType[0],
        imgType = tempType[1],
        isTure = false;
      if (!isFileName.test(tempNames[0])) {
        this._showMessage(
          "error",
          "文件名格式错误，只能包含中文、下划线、横线、英文、数字，但只能以中文和下划线开头，且不能有空格！"
        );
        return (isTure = false);
      }
      if (isImage !== "image") {
        this._showMessage("error", "只能上传JPG/PNG格式图片！");
      } else {
        if (imgType === "png" || imgType === "jpeg") {
          isTure = true;
        } else {
          this._showMessage("error", "只能上传JPG/PNG格式图片！");
          isTure = false;
        }
      }
      return isTure;
    },
    desc_datas(tempData, stus) {
      const {
        authority,
        sex,
        certificateTypeCode,
        areaCode,
        bhrAccount,
        oaAccount,
        flowAccount,
        accountMatching,
        positionName
      } = tempData;
      const arr = [
        "",
        "仅开通域账号",
        "开通域账号及邮箱",
        "开启企业微信",
        "开通工卡",
        "申请计算机",
      ];
      const sexArr = ["女", "男"];
      const startArr = ["未开启", "已开启"];
      let authorityStr = [];

      if (authority) {
        authority.split(",").forEach((item) => {
          authorityStr.push(arr[item]);
        });
      }
      let tempObj = {
        ...tempData,
        sex: sexArr[sex],
        certificateTypeCode: this.idtypes[certificateTypeCode],
        areaCode: areaCode && this.areas[areaCode],
        bhrAccount: bhrAccount && startArr[bhrAccount],
        oaAccount: oaAccount && startArr[oaAccount],
        flowAccount: flowAccount && ["未添加", "已添加"][flowAccount],
        accountMatching: accountMatching && startArr[accountMatching],
        settlementMethod:  this.entranceInfo.settlementMethod,

      };
      console.log(sexArr[sex]);
      return tempObj;
    },
  },
};
</script>
<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
.admission-container {
  position: relative;
  .info-txt {
    height: auto !important;
    max-width: 530px;
  }
 .report {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  padding-bottom: 10px;
  p {
    line-height: 20px;
    display: flex;
    .label {
      width: 198px;
      text-align: right;
      color: #636363;
      padding-right: 10px;
      box-sizing: border-box;
      text-align: left;
      padding-left: 40px;
      font-size: 14px;
      position: relative;
      &::after {
        content: ':';
        display: block;
        position: absolute;
        right: 10px;
        top: 0;
      }
    }
  }
  .reson {
    max-height: 100px;
    overflow-y: scroll;
    display: flex;
    position: relative;
    span {
      width: 198px;
      text-align: right;
      color: #636363;
      padding-right: 10px;
      box-sizing: border-box;
      text-align: left;
      padding-left: 40px;
      font-size: 14px;
      position: sticky;
      top: 0;
      &::after {
        content: ':';
        display: block;
        position: absolute;
        right: 10px;
        top: 0;
      }
    }
    p {
      flex: 1;
      color: #FB7299;
      word-break: break-all;
      text-align: left;
    }
  }
  span {
    text-align: left;
    color: #FB7299;
    &:last-child {
      flex: 1;
    }
  }
}
  .form-static-title {
    width: 90%;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    font-weight: bold;
    color: $main-color;
    border-left: 4px solid $main-color;
    text-indent: 20px;
    text-align: left;
  }
  .people-detail-info-box {
    border: 1px solid #ededed;
    .people-detail-title {
      height: 40px;
      line-height: 40px;
      text-align: left;
      border-bottom: 1px solid #ededed;
      background-color: #fafafa;
      text-indent: 20px;
      font-size: 14px;
      font-weight: bold;
      color: #3a3a3a;
    }
    .form-static-title {
      margin-left: 20px;
      text-indent: 17px;
    }
    .people-detail-box {
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ededed;
      border-bottom: 0;
      &:last-child {
        border-bottom: none;
      }
      .el-col {
        text-align: left;
        padding-left: 40px;
      }
      .form-static-title {
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
        color: #636363;
        height: 35px;
        line-height: 35px;
        float: left;
      }
      .info-tip {
        width: 140px;
      }
      .img-icon {
        font-size: 14px;
      }
      .img-txt {
        color: $main-color;
      }
    }
  }
}
</style>
